<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户管理表格</title>

<!-- jqGrid组件基础样式包-必要 -->
<link href="${basePath!}/static/jqgrid/css/ui.jqgrid.css" type="text/css" media="screen" rel="stylesheet"/>
<link href="${basePath!}/static/jqgrid/css/jquery-ui.css" type="text/css" media="screen" rel="stylesheet"/>
<link href="${basePath!}/static/css/global.css" type="text/css" media="screen" rel="stylesheet"/>
<link href="${basePath!}/static/plugins/font-awesome/css/font-awesome.min.css" type="text/css" media="screen" rel="stylesheet"/>
<link href="${basePath!}/static/layui/css/layui.css" type="text/css" media="screen" rel="stylesheet"/>

<!-- jquery插件包-必要 -->
<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
<script src="${basePath!}/static/js/jquery.min.js" type="text/javascript"></script>
<script src="${basePath!}/static/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!-- jqGrid插件的多语言包-非必要 -->
<!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
<script src="${basePath!}/static/jqgrid/js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="${basePath!}/static/jqgrid/js/jquery-ui.js" type="text/javascript"></script>
<script src="${basePath!}/static/layui/layui.js" type="text/javascript"></script>

    <base href="${basePath!}/">

    <script type="text/javascript">
        var layerid;//当前弹层id;这个id可以定义多个，主要的目的是为了在回调函数关闭弹层时使用的
        $(function () {
            layui.use(['layer','form','layedit','laydate','table'], function(){
                var layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate,
                $ = layui.$,
                form = layui.form;
                var table = layui.table;

                var active = {
                    reload: function(){
                        var dataReload = $('#dataReload');
                        var index = layer.msg("查询中,请稍候...",{icon:16,time:false,shade:0});
                        setTimeout(function () {
                            //执行重载
                            table.reload('list2',{
                                page:{
                                    currentPage:1//重新从第 1 页开始
                                },
                                where: {
                                    paramName: dataReload.val()
                                }
                            });
                            layer.close(index);
                        },800);
                    }
                };

                $("#searchTable").on('click',function () {
                    var type = $(this).data('type');
                    active[type]?active[type].call(this) : '';
                });

                var param = {
                    currentPage:1,
                    lineSize:10
                }

                //表单数据加载
                table.render({
                    elem: '#list2',
                    url:'/admin/user/findByPage',
                    method:'post',
                    //contentType: "application/json",
                    //dataType: 'json',
                    //data:JSON.stringify(param),
                    request: {
                        pageName: 'currentPage' //页码的参数名称，默认：page
                        ,limitName: 'lineSize' //每页数据量的参数名，默认：limit
                    },
                    response: {
                            statusName: 'code' //规定数据状态的字段名称，默认：code
                            ,statusCode: 10000 //规定成功的状态码，默认：0
                            ,msgName: 'message' //规定状态信息的字段名称，默认：msg
                            ,countName: 'totalCount' //规定数据总数的字段名称，默认：count
                            ,dataName: 'data' //规定数据列表的字段名称，默认：data
                    },
                    cols: [[
                        {field:'userName', width:150, align:'center', title: '用户名',}
                        ,{field:'trueName', width:150, align:'center', title: '真实姓名'}
                        ,{field:'role', width:150, align:'center', title: '角色'}
                        ,{field:'createTime', title: '创建时间', align:'center', minWidth: 150},
                        {field:'enable',title:'启用/禁用', align:'center', minWidth: 50,
                            templet: function(d){
                                if (d.enable){
                                    return '<span style="color: green;">启用</span>'
                                }else {
                                    return '<span style="color: red;">禁用</span>'
                                }
                            }},
                        {field:'right',title:'操作', align:'center', minWidth:200,toolbar:'#toolBar'}
                    ]],
                    page: true,//开启分页
                    //skin:'line',//行边框风格
                    even:true,//开启隔行背景
                    size:'lg',//大尺寸的表格
                    done:function (result) {
                        console.info(result);
                    }
                });

                //监听工具条
                table.on('tool(list)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的DOM对象
                    if (layEvent === 'del') {
                        //删除
                        layer.confirm('真的删除行么', function(index){
                            //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            $.ajax({
                                type: "GET",
                                url:"admin/user/remove/"+data.id,
                                async: false,
                                error: function(request) {
                                    layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                                },
                                success: function(data) {
                                    if(data.sucFlag){
                                        //layer.msg(data.message, {icon: 6});
                                        layer.close(index);
                                        active["reload"]?active["reload"].call(this) : '';
                                    }else {
                                        layer.msg(data.message, {icon: 5});
                                    }
                                }
                            });
                        });
                    }
                    else if (layEvent === 'edit') {
                        //修改
                        //向表单填充数据
                        $("#editlabelid").html(data.id);//临时存放id，当提交时再去除赋值给input
                        $("#editid").val(data.id);
                        $("#userName").val(data.userName);
                        /*$("#passWord").val(data.passWord);*/
                        $("#trueName").val(data.trueName);
                        $("#role").val(data.role);

                        //开启编辑表单所在的弹层。注意编辑和新建的表单是一套模板
                        layerid=layer.open({
                            skin: 'layui-layer-molv',
                            area:'60%',
                            type: 1,
                            title:'编辑用户',
                            content: $('#addeditformdivid') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        });
                    }
                    else if (layEvent === 'enable') {
                        //启用/禁用
                        var flag = data.enable;
                        if (flag){
                            flag = false;
                        }else {
                            flag = true;
                        }
                        $.ajax({
                            type: "POST",
                            url:"admin/user/enable?id=" +data.id+ "&flag=" +flag ,
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.sucFlag){
                                    //layer.msg(data.message, {icon: 6});
                                    //layer.close(index);
                                    active["reload"]?active["reload"].call(this) : '';
                                }else {
                                    layer.msg(data.message, {icon: 5});
                                }
                            }
                        });
                    }
                    else if (layEvent === 'resetPwd') {
                        //重置密码
                        console.info(data);
                        $.ajax({
                            type: "POST",
                            url:"/user/updatePassWord?id="+data.id+"&passWord=111111",
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if (data.sucFlag){
                                    layer.msg(data.message, {icon: 6});
                                }else {
                                    layer.alert(data.message);
                                }
                            }
                        });
                    }
                });
                //创建一个编辑器
                var editIndex = layedit.build('LAY_demo_editor');
                //自定义验证规则
                form.verify({
                    userName: function(value) {
                        if(value.length < 5) {
                            return '用户名至少得5个字符';
                        }
                    },
                    //password: [/(.+){6,12}$/, '密码必须6到12位'],
                    content: function(value) {
                        layedit.sync(editIndex);
                    }
                });
                //添加按钮点击事件
                $("#add").click(function () {
                    $("#reset").click();//重置表单(新建时在进入表单前要重置一下表单的内容，不然表单打开后会显示上一次的表单的内容。这里调用表单中重置按钮的点击方法来重置)
                    layerid=layer.open({//开启表单弹层
                        skin: 'layui-layer-molv',
                        area:'60%',
                        type: 1,
                        title:'新建用户',
                        content: $('#addeditformdivid') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                });
                //监听提交
                form.on('submit(addeditsubmitfilter)', function(data) {
                    //为了防止form中的id值被重置后置空,将编辑的id存放在label中
                    $("#editid").val($("#editlabelid").html() );
                    $("#editlabelid").html("");
                    if (data.field.id){
                        //修改
                        $.ajax({
                            type: "POST",
                            url:"admin/user/add",
                            contentType: "application/json",
                            dataType: 'json',
                            data:JSON.stringify(data.field),
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.sucFlag){
                                    //layer.msg(data.message, {icon: 6});
                                    layer.close(layerid);
                                    active["reload"]?active["reload"].call(this) : '';
                                    $("#reset").click();//重置表单
                                }else {
                                    layer.msg(data.message, {icon: 5});
                                }
                            }
                        });
                    } else {
                        //添加
                        var param = {
                            userName:data.field.userName,
                            //passWord:data.field.passWord,
                            trueName:data.field.trueName,
                            role:data.field.role
                        }
                        $.ajax({
                            type: "POST",
                            url:"admin/user/add",
                            contentType: "application/json",
                            dataType: 'json',
                            data:JSON.stringify(param),
                            async: false,
                            error: function(request) {
                                layer.alert("与服务器连接失败/(ㄒoㄒ)/~~");
                            },
                            success: function(data) {
                                if(data.sucFlag){
                                    //layer.msg(data.message, {icon: 6});
                                    layer.close(layerid);
                                    active["reload"]?active["reload"].call(this) : '';
                                    $("#reset").click();//重置表单
                                }else {
                                    layer.msg(data.message, {icon: 5});
                                }
                            }
                        });
                    }
                    return false;//防止表单提交后跳转
                });
            });
        });

    </script>
    <script type="text/html" id="toolBar">
        <#--<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>-->
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{#  if(d.enable){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enable">禁用</a>
        {{#  }else{ }}
            <a class="layui-btn layui-btn-xs" lay-event="enable">启用</a>
        {{#  } }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetPwd">重置密码</a>
        <#--<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>-->
    </script>
</head>
<body>
<#--<div class="layui-btn-group">
    <button class="layui-btn" id="add">增加</button>
    <button class="layui-btn layui-btn-normal" id="edit">编辑</button>
    &lt;#&ndash;<button class="layui-btn" id="editrole">设置角色</button>&ndash;&gt;
    <button class="layui-btn layui-btn-danger" id="delete">删除</button>
</div>-->
    <fieldset class="layui-elem-field layui-field-title" style="width: 98%;margin: 10px auto;">
        <legend>用户管理</legend>
        <div >
            <div class="layui-inline">
                <input class="layui-input" name="paramName" id="dataReload" autocomplete="off" />
            </div>
            <button id="searchTable" class="layui-btn" data-type="reload">搜索</button>
            <button class="layui-btn" id="add">添加</button>
        </div>
    </fieldset>

<table class="layui-hide" id="list2" lay-filter="list">

</table>
<#--<div id="pager2"></div>-->

<#--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓add↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->
<div id="addeditformdivid" hidden="" class="layui-fluid" style="margin: 15px;">
    <form class="layui-form" action="" id="addeditformid">
        <label hidden="true" id="editlabelid"></label>
        <input id="editid" name="id" value="" hidden/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="userName" name="userName" lay-verify="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <#--<div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" id="passWord" name="passWord" lay-verify="passWord" autocomplete="off" placeholder="请输入密码" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" id="trueName" name="trueName" lay-verify="role" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="text" id="role" name="role" lay-verify="role" autocomplete="off" placeholder="请输入角色" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="addeditsubmitfilter">立即提交</button>
                <button id="reset" type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
<#--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑add↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->

<#--带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应-->

</body>
</html>
